<!DOCTYPE HTML>
<html>
    
    <head>
        <title>
        </title>
        <meta charset="UTF-8" />
        <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js">
        </script>
        <script type="text/javascript" src="jquery.jplayer.min.js">
        </script>
        <style type="text/css">
		body {
			margin: 0;
			padding: 0
		}
		div.openyy {
			cursor: pointer;
			text-decoration: none;
			font: 12px/1.2 "Helvetica Neue",Helvetica,Arial,sans-serif;
			overflow: hidden;
			display: block;
			width: 250px;
			height: 30px;
			line-height: 30px;
			white-space: nowrap;
			background-color: #FF6503;
			color: #fff;
			border-bottom: #C4753D 1px solid;
			text-align: center;
			border-radius: 3px;
			text-shadow: 0-1px 0 rgba(0, 0, 0, .2);
			font-size: 14px
		}
		.openyy span {
			float: left;
			margin-left: 10px;
			width: 210px;
			overflow: hidden;
			text-align: left
		}
		#play {
			width: 0;
			height: 0;
			border:10px solid transparent;
			border-left: 15px solid #FFF;
			float: right;
			margin-top: 5px
		}
		#pause {
			width: 5px;
			height: 20px;
			border-left: 5px solid #FFF;
			border-right: 5px solid #FFF;
			float: right;
			margin-top: 5px;
			margin-right: 10px
		}
		#progress {
			height: 30px;
			background: #FF8F00;
			position: absolute;
			opacity: 0.5;-moz-opacity: 0.5;
			filter: alpha(opacity = 50)
		}
        </style>
        <script type="text/javascript">
            $(function() {
                var hash = location.hash.split('|');
                if (hash.length == 3) {
                    var background = '#' + hash[1],
                    border = '#' + hash[2]
                } else {
                    var background = '#' + hash[2],
                    border = '#' + hash[3]
                }
                $('.openyy').css({
                    'background': background,
                    'border-bottom-color': border
                });

                $('#progress').css({
                    'background': border
                });
                var song = hash[0].substr(1);
                if (song.substring(0, 7) == "http://") {
                    var songs = new Array(hash[0].substr(1), hash[1]),
                    format = songs[0].split('.').pop();
                    $('#jplayer').jPlayer({
                        ready: function() {
                            switch (format) {
                            case 'wma':
                                $(this).jPlayer('setMedia', {
                                    wma: songs[0]
                                });
                                break;
                            case 'ogg':
                                $(this).jPlayer('setMedia', {
                                    ogg: songs[0]
                                });
                                break;
                            case 'ape':
                                $(this).jPlayer('setMedia', {
                                    ape: songs[0]
                                });
                                break;
                            default:
                                $(this).jPlayer('setMedia', {
                                    mp3: songs[0]
                                });
                                break
                            }
                            $('title').html(songs[1]);
                            $('.openyy span').html(songs[1])
                        },
                        preload: 'none',
                        ended: function() {
                            $('#pause').click();
                            $('#progress').width('0px')
                        },
                        swfPath: './',
                        supplied: 'mp3,wma,ogg,ape'
                    })
                } else {
                    $.ajax({
                        url: 'http://imnerd.org/lab/player/apiv2.php?id=' + song,
                        type: 'GET',
                        dataType: 'jsonp',
                        async: false,
                        success: function(d) {
                            $('#jplayer').jPlayer({
                                ready: function() {
                                    $(this).jPlayer('setMedia', {
                                        mp3: d.location
                                    });
                                    $('title').html(d.title);
                                    $('.openyy span').html(d.title);
                                    $.ajax({
                                        url: 'http://imnerd.org/lab/search/lyric.php?url=' + d.lyric,
                                        type: 'GET',
                                        dataType: 'jsonp',
                                        async: false,
                                        success: function(lrc) {
                                            var m = 0;
                                            $('#jplayer').bind($.jPlayer.event.timeupdate,
                                            function(e) {
                                                if (e.jPlayer.status.currentTime > lrc[m][0]) $('.openyy span').html(lrc[m][1]),
                                                m++
                                            })
                                        }
                                    })
                                },
                                ended: function() {
                                    $('#pause').click();
                                    $('#progress').width('0px')
                                },
                                preload: 'none',
                                swfPath: './',
                                supplied: 'mp3'
                            })
                        }
                    })
                }
                $('#jplayer').bind($.jPlayer.event.timeupdate,
                function(e) {
                    $('#progress').width(Math.round(e.jPlayer.status.currentPercentAbsolute / 100 * $('.openyy span').width()))
                });
                $('body').on('click', '#play',
                function() {
                    $('#jplayer').jPlayer('play');
                    $(this).attr('id', 'pause')
                });
                $('body').on('click', '#pause',
                function() {
                    $('#jplayer').jPlayer('pause');
                    $(this).attr('id', 'play')
                })
            });
        </script>
    </head>
    
    <body>
        <div class="openyy">
            <div id="progress">
            </div>
            <div id="jplayer">
            </div>
            <span>
            </span>
            <div id="play"></div>
        </div>
    </body>

</html>